<!--学生考试首页-->
<template>
    <div id="student">
        <el-row class="padding-50">
            <el-col :span="24">
                <ul class="list">
                    <img
                        src="@/assets/033.png"
                        style="
                            width: 35px;
                            height: 35px;
                            margin: 13px -15px 0 10px;
                            -webkit-user-drag: none;
                            -khtml-user-drag: none;
                            -moz-user-drag: none;
                            /* user-drag: none; */
                        "
                    />

                    <li class="logo"><span>教育训练中心考试系统</span></li>
                    <li @click="exam()"><a href="javascript:;">考试中心</a></li>
                    <li @click="practice()">
                        <a href="javascript:;">试卷练习</a>
                    </li>
                    <li>
                        <router-link to="/scoreTable">我的分数</router-link>
                    </li>
                    <li
                        class="right user-info"
                        @mouseenter="flag = true"
                        @mouseleave="flag = false"
                    >
                        <div class="user-container">
                            <!-- 头像 -->
                            <el-avatar
                                shape="square"
                                :size="50"
                                :src="require('@/assets/img/avatar.jpg')"
                            ></el-avatar>

                            <a href="javascript:;" class="user-name-link">
                                <i class="iconfont icon-Userselect"></i>
                                <span class="user-name">{{ user.userName }}</span>
                            </a>

                            <!-- 下拉菜单 -->
                            <div class="msg" v-if="flag">
                                <p @click="manage()">修改密码</p>
                                <p class="exit" @click="exit()">退出</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </el-col>
        </el-row>

        <!-- 路由区域 -->
        <div class="main">
            <router-view></router-view>
        </div>

        <v-footer></v-footer>
    </div>
</template>

<script>
import myFooter from "@/components/student/myFooter";
import { mapState } from "vuex";

export default {
    components: {
        "v-footer": myFooter,
    },
    data() {
        return {
            flag: false,
            user: {},
        };
    },
    created() {
        this.userInfo();
    },
    methods: {
        exit() {
            this.$router.push({ path: "/" });
            this.$cookies.remove("cname");
            this.$cookies.remove("cid");
            this.$cookies.remove("rb_token");
            this.$cookies.remove("rb_role");
        },
        manage() {
            this.$router.push({ path: "/manager" });
        },
        userInfo() {
            let studentName = this.$cookies.get("cname");
            let studentId = this.$cookies.get("cid");
            console.log(`studentId${studentId}`);
            console.log(`studentName ${studentName}`);
            this.user.userName = studentName;
            this.user.studentId = studentId;
        },
        practice() {
            let isPractice = true;
            this.$store.commit("practice", isPractice);
            this.$router.push({ path: "/startExam" });
        },
        exam() {
            let isPractice = false;
            this.$store.commit("practice", isPractice);
            this.$router.push({ path: "/student" });
        },
    },
    computed: mapState(["isPractice"]),
};
</script>

<style scoped>
#student .padding-50 {
    margin: 0 auto;
    padding: 0 50px;
    box-shadow: 0 0 10px 4px rgba(1, 149, 255, 0.1);
    background-color: #fff;
}

.list a {
    text-decoration: none;
    color: #334046;
    font-size: 18px;
}

li {
    list-style: none;
    height: 60px;
    line-height: 60px;
}

#student .list {
    display: flex;
    align-items: center; /* 垂直居中所有项 */
}

#student .list li {
    padding: 0 20px;
    cursor: pointer;
}

#student .list li:hover {
    background-color: #0195ff;
    transition: all 0.3s ease;
}

#student .list li:hover a {
    color: #fff;
}

/* Logo 样式 */
#student .list .logo {
    font-weight: bold;
    color: black;
    font-size: 28px;
}

#student .list .right {
    margin-left: auto;
    position: relative;
}

.user-container {
    display: flex;
    align-items: center;
    gap: 10px; /* 头像与文字间距 */
}

.el-avatar {
    margin: 5px 0;
    flex-shrink: 0; /* 防止压缩 */
}

.user-name-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 22px;
    font-weight: 600;
    white-space: nowrap; /* 关键：禁止换行 */
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-name-link .iconfont {
    margin-right: 6px;
    font-size: 22px;
}

.user-name {
    font-size: 22px;
}

.msg {
    position: absolute;
    top: 60px;
    right: 0;
    width: 120px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 1000;
    border-bottom: 3px solid #0195ff;
}

.msg p {
    height: 40px;
    line-height: 40px;
    cursor: pointer;
}

.msg p:hover {
    background-color: #0195ff;
    color: #fff;
}

.msg .exit {
    color: #f56c6c;
}
</style>